<template name="index-category">
    <view class="container">
        <u-row customStyle="flex-wrap:wrap;">
            <u-col span="2.4" v-for="item in columns " :key="item.id">
                <view class="info" @click="navigateTo(item)">
                    <view class="image">
                        <u-image
                            :src="item.icon"
                            width="84rpx"
                            height="84rpx"
                        ></u-image>
                    </view>
                    <view class="text">
                        <u-text
                            :text="item.name"
                            color="#797979"
                            size="22rpx"
                            align="center"
                        ></u-text>
                    </view>
                </view>
            </u-col>
        </u-row>
    </view>
</template>
<script>
export default {
    name: "index-category",
    props: {
        columns: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {

        }
    },
    methods: {
        navigateTo(item) {
            if (item.router === 'pages/productList/index') {
                uni.$u.route({
                    url: item.router,
                    params: item.params
                })
            } else {
                uni.$u.route({
                    url: item.router,
                    params: {
                        columnId: item.id
                    }
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        margin-bottom: 20rpx;
        .info {
            display: flex;
            justify-content: center;
            flex-direction: column;
            margin-top: 30rpx;
            .image {
                margin: 0 auto;
            }
            .text {
                margin-top: 10rpx;
            }
        }
    }
</style>
